<template>
    <div class="disputeDetail">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/disputeList' }">争议列表</el-breadcrumb-item>
                <el-breadcrumb-item>争议详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 内容 -->
        <div class="content">
            <h2>争议详情</h2>
            <el-form>
                <el-form-item label="订单编号" label-width="90px">
                    <el-input readonly type="text" v-model="infoData.order_no" class="input"></el-input>
                </el-form-item>
                <el-form-item label="争议类型" label-width="90px">
                    <el-input readonly type="text" v-model="infoData.appeal_type" class="input"></el-input>
                </el-form-item>
                <el-form-item label="合作商名称" label-width="90px">
                    <el-input readonly type="text" v-model="infoData.partner_name" class="input"></el-input>
                </el-form-item>
                <el-form-item label="合作商手机" label-width="90px">
                    <el-input readonly type="text" v-model="infoData.partner_phone" class="input"></el-input>
                </el-form-item>
                <el-form-item label="客户名称" label-width="90px">
                    <el-input readonly type="text" v-model="infoData.client_name" class="input"></el-input>
                </el-form-item>
                <el-form-item label="客户手机" label-width="90px">
                    <el-input readonly type="text" v-model="infoData.client_phone" class="input"></el-input>
                </el-form-item>
                <el-form-item label="提交时间" label-width="90px">
                    <el-input readonly type="text" :value="infoData.create_time?$moment(infoData.create_time*1000).format('yyyy-MM-DD HH:mm'):''" class="input"></el-input>
                </el-form-item>
                <el-form-item label="撤回时间" label-width="90px">
                    <el-input readonly type="text" :value="infoData.recall_time?$moment(infoData.recall_time*1000).format('yyyy-MM-DD HH:mm'):''" class="input"></el-input>
                </el-form-item>
                <el-form-item label="处理时间" label-width="90px">
                    <el-input readonly type="text" :value="infoData.handle_time?$moment(infoData.handle_time*1000).format('yyyy-MM-DD HH:mm'):''" class="input"></el-input>
                </el-form-item>
                <el-form-item label="平台介入" label-width="90px">
                    <el-input readonly type="text" :value="infoData.is_platform==0?'否':infoData.is_platform==1?'是':''" class="input"></el-input>
                </el-form-item>
                <el-form-item label="争议描述" label-width="90px">
                    <el-input readonly type="textarea" v-model="infoData.appeal_desc" :rows="4"></el-input>
                </el-form-item>
                <el-form-item :label="infoData.type==2?'视频':'图片'" label-width="90px">
                    <div v-if="infoData.type==1">
                        <el-image 
                            style="width: 110px; height: 110px"
                            v-for="(item,index) in imgList"
                            :key="index"
                            :src="item" 
                            :preview-src-list="imgList">
                        </el-image>
                    </div>
                    <div v-else>
                        <video :src="infoData.media.path"></video>
                    </div>
                </el-form-item>
                <el-form-item label="卖场" label-width="90px">
                    <el-select
                      v-model="infoData.market_id"
                      clearable
                      @change="selectMarket"
                      filterable
                      disabled
                      placeholder="请选择卖场"
                    >
                      <el-option
                        v-for="item in marketList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" v-if="infoData.status==0">
            <el-button type="primary" @click="submit(1)">处理完成</el-button>
            <!-- <el-button type="primary" style="margin-left:10px;" @click="submit(2)">撤回</el-button> -->
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            id:'',
            type:'',//1设计单，2施工单
            infoData:{},
            imgList:[],
            marketList:[], //卖场列表
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.type = this.$route.query.type
        if(this.type){
            this.getDetail()
        }
        this.remoteMethod()
    },
    methods: {
        // 获取卖场列表
        remoteMethod() {
          this.$http.post("/api/root/Market/marketList").then((res) => {
            console.log(res, "卖场列表");
            if (res.code == 1) {
              this.marketList = res.data ? res.data : [];
            }
          });
        },

        // 获取申请详情
        getDetail(){
            let url = this.type==1?'/api/root/DesignerOrderAppeal/view':'/api/root/BuilderTeamOrderAppeal/view';
            this.$http.post(url,{id:this.id}).then(res=>{
                console.log(res,'申诉详情');
                if(res.code==1){
                    this.infoData = res.data?res.data:{}
                    let arr = []
                    res.data.media.map(item=>{
                        arr.push(item.path)
                    })
                    this.imgList = arr
                }
            })
        },

        //处理完成按钮
        submit(status){
            let params = {
                id:this.id,
                // status,
            }
            let url = this.type==1?'/api/root/DesignerOrderAppeal/handle':'/api/root/BuilderTeamOrderAppeal/handle';
            this.$http.post(url,params).then(res=>{
                console.log(res,'处理结果');
                if(res.code==1){
                    this.$message.success(status==1?'处理成功':'撤回成功')
                    this.getDetail()
                }else{
                    this.$message.warning(res.msg)
                }
            })
        } 
    },
}
</script>
<style lang="less">
@import 'detail.less';
</style>
